<!--
 * @Description: 信息公告
 * @Author: zhao
 * @Date: 2022-07-08 09:30:17
 * @LastEditors: zhao
 * @LastEditTime: 2022-07-08 10:25:08
-->
<!--  -->
<template>
    <div class="infoPublic">
        <!-- <zBack :name="公告" /> -->
        <div class="infoPublic_content">
            <div style="flex: auto">
                <h1>地质资料信息公告</h1>
                <ul>
                    <li>
                        <div class="title">
                            <span>序号</span>
                            <span>公告标题</span>
                            <span>公告时间</span>
                        </div>
                    </li>
                    <li v-for="(i, index) in infoPublic" :key="index" class="center">
                        <div class="cursor ellipsis" @click="jump(i)">
                            <span>{{ index + 1 }}</span>
                            <span class="ellipsis">{{ i.title }}</span>
                            <span>{{ i.updateTime }}</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div style="text-align: center;margin-bottom: 100px;margin-top: 20px;">
                <zPagination ref="zPagination" />
            </div>
            <!-- <zPagination class="zPagination" :small="true" /> -->
        </div>
    </div>
</template>

<script>
import zPagination from "@/components/zTable/pagination.vue"
import zBack from "@/components/zBack"
export default {
    name: "",
    data() {
        return {
            infoPublic: [],
        }
    },

    components: { zPagination, zBack },

    computed: {},

    mounted() {
        // this.$store.state.table.PaginationData.isbackground = true
        this.$store.state.table.PaginationData.layout = "total, sizes, prev, pager, next, jumper"
        this.initData()
    },
    watch: {
        "$store.state.table.tableData": {
            handler: function (val, oldVal) {
                this.infoPublic = val
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        async initData() {
            this.$store.state.table.url = "ArchiveInfo/getNoticeList"
            let val = {
                pageSize: 10,
                pageIndex: 1,
            }
            const { data, code, count } = await this.$store.dispatch("ArchiveInfo/getNoticeList", val)
            if (code == 200) this.infoPublic = data
            this.$store.state.table.PaginationData.total = count || 0
        },
        jump(i) {
            sessionStorage.setItem("infoPublic", JSON.stringify(i))
            this.$router.push("/InfoPublic/details")
        },
    },
}
</script>
<style lang='scss' scoped>
.infoPublic {
    padding: var(--main-padding);
    background: white;

    .infoPublic_content {
        min-height: $height_full;
        display: flex;
        flex-direction: column;

        h1 {
            text-align: center;
            padding: 20px 0;
            margin: 0;
            font-size: 36px;
            font-weight: bold;
            color: #515a6e;
            padding-top: 50px;
            padding-bottom: 40px;
        }
    }

    ul {
        padding: 20px;

        min-height: calc(100vh - 400px);
        border: 1px solid #efefef;

        li {
            // border-bottom: 1px dashed #ccc;
            // list-style: unset;
            font-size: 20px;
            height: 45px;
            line-height: 45px;
            padding: 0 5px;
            // margin-left: 30px;
            margin: 10px 0;
            color: #666;

            &:nth-child(2n-1) {
                // background: rgb(242, 242, 242);
            }

            &:nth-child(2n) {
                // background: #fff;
            }

            &.center:hover {
                color: #ff9913 !important;
            }

            &.center {
                display: flex;
                justify-content: flex-start;
                border-bottom: 1px dashed #ccc;
            }

            span:nth-child(1) {
                // display: inline-block;
                width: 1rem;
                display: flex;
                justify-content: center;
            }

            span:nth-child(2) {
                display: inline-block;
                width: 80%;
            }

            span:nth-child(3) {
                // display: inline-block;
                width: 2rem;
                display: flex;
                justify-content: center;
            }

            div {
                display: flex;
                align-items: center;
                justify-content: space-between;

                width: 100%;
            }
        }
    }

    .title {
        span {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }

    .zPagination {
        align-self: center;
        padding: 20px 0;
        // padding-left: 50px;
    }
}
</style>